<template>
  <van-form>
    <van-field
      v-model="userInfo.userName"
      label="用户名"
      placeholder="请填写用户名"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="userInfo.password"
      type="password"
      label="密码"
      placeholder="请填写密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
    <div style="margin: 16px;">
      <van-button
        round
        block
        type="info"
        native-type="submit"
        @click="submit(userInfo.userName, userInfo.password)"
        >提交</van-button
      >
    </div>
  </van-form>
</template>

<script>
import { Form, Field, Button } from 'vant';

// 混入对象的钩子将在组件自身钩子之前调用
const childMixin = {
  created() {
    console.log(1);
  },
};

export default {
  mixins: [childMixin],
  name: 'Home',
  components: {
    vanForm: Form,
    vanField: Field,
    vanButton: Button,
  },
  props: {
    userInfo: {
      type: Object,
      required: true,
    },
  },
  methods: {
    submit(name, password) {
      const params = {
        name,
        password,
      };
      this.$emit('showinfo', params);
      this.$root.userInfo = params;
    },
  },
  created() {
    console.log(2);
  },
  mounted() {
    // console.log(this.$parent);
  },
};
</script>

<style scoped lang="less"></style>
